$(function(){
	var site = '${site}';
	if(site !=''){
		//修改时设置默认站点
		selectSite($("#siteSelect"));
		$("#siteSelect").prop("disabled",true);
		$("#siteSelect").selectpicker('render');
		//修改时加载可用参数
		selectUrl($("#urlSelect"));
		//隐藏已有的可选参数
		hiddenOption();
		
		//显示title显示模式的效果
		setTitleModel();
	}
	//绑定可选参数的事件
	bindEvent();
});

//删除
function deleteE(obj){
	
	var valueData = $(obj).parent().next().attr("data-value");
	moveToRight(valueData);
	$(obj).parent().parent().remove();
	//更新显示Tilte模式
	setTitleModel();
}

//上下移动
function move(obj,flag){
	var $li = $(obj).parent().parent();
	var $next_li = $li.next();
	var $prev_li = $li.prev();
	
	if(flag == 1){
		$next_li.after($li);
	}else{
		$prev_li.before($li);
	}
	//显示调整后的效果
	setTitleModel();
}

//添加定义属性
function addCoustom(){
	var html = new Array();
	html.push('<li class="list-group-item list-group-item-success">');
	html.push('<div class="sign-display">');
	html.push('<span class="sign glyphicon glyphicon glyphicon-remove" onclick="cancel(this)" title="取消"></span>');
	html.push('<span class="sign glyphicon glyphicon-ok" onclick="yes(this)" title="确认"></span>');
	html.push('</div>');
	html.push('<span data-custom="2"></span>');
	html.push('<input type="text" placeholder="请输入参数" style="width:280px;" >');
	html.push('</li>');
	$("#title-option").append(html.join(" "));
	$("#title-option li:last").children("input").focus();
}

//添加自定义属性-确认后执行
function inputBlur(obj){
	var thisV = $(obj).val();
	if(thisV == null || thisV == '' ){
		alert("请输入");
		obj.focus();
		return ;
	}
	var $prev_span = $(obj).prev();
	$prev_span.text(thisV);
	$prev_span.attr("data-value",thisV);
	
	//改变显示按钮
	var $signDiv = $(obj).parent().children(".sign-display");
	changeButton_sure($signDiv);
	
	$prev_span.show();
	$(obj).hide();
}

//确认
function yes(obj){
	var $input = $(obj).parent().parent().children("input");
	inputBlur($input);
	setTitleModel();
}

//取消
function cancel(obj){
	var $prev_span = $(obj).parent().next();
	var $next_input =  $prev_span.next();
	var spanText = $prev_span.text();
	if(spanText == null || spanText == '' ){
		$(obj).parent().parent().remove();
	}else{
		$next_input.val(spanText);
		$prev_span.show();
		$next_input.hide();
		changeButton_sure($(obj).parent());
	}
}

//改变显示按钮_确认
function changeButton_sure(obj){
	var html = new Array();
	html.push('');
	html.push('<span class="sign glyphicon glyphicon-trash" title="删除" onclick="deleteE(this);"></span>');
	html.push('<span class="sign glyphicon glyphicon-pencil" title="修改" onclick="alter(this)"></span>');
	html.push('<span class="sign glyphicon glyphicon-arrow-up" title="上移" onclick="move(this,-1)"></span>');
	html.push('<span class="sign glyphicon glyphicon-arrow-down" title="下移" onclick="move(this,1)"></span>');
	$(obj).empty();
	$(obj).append(html.join(" "));
}

//改变显示按钮_编辑
function changeButton_edit(obj){
	var html = new Array();
	html.push('');
	html.push('<span class="sign glyphicon glyphicon glyphicon-remove" onclick="cancel(this)" title="取消"></span>');
	html.push('<span class="sign glyphicon glyphicon-ok" onclick="yes(this)" title="确认"></span>');
	$(obj).empty();
	$(obj).append(html.join(" "));
}

//修改
function alter(obj){
	var $input = $(obj).parent().parent().children("input");
	var $prev_span = $input.prev();
	$input.show();
	$prev_span.hide();
	changeButton_edit($(obj).parent());
}

function bindEvent(){
	$("#db_option li").unbind('dblclick').on('dblclick',function(){
		var $this = $(this);
		var showData = $this.text();
		var valueData = $this.attr("data-value");
		//右侧生成参数
		drawParam(showData,valueData);
		//清除可用参数的选中效果
		cancelActive()
		//隐藏当前参数
		$this.hide();
		//更新显示Tilte模式
		setTitleModel();
	});
	
	$("#db_option li").on('click',function(){
		var $this = $(this);
		$(this).parent().find(".active").removeClass("active");
		$(this).addClass("active");
		
	});
}

//清除可用参数的选中效果
function cancelActive(){
	$("#db_option").find(".active").removeClass("active");
}


//删除右边后，如果是从候选参数选入的，则把右边对应的参数显示出来
function moveToRight(valueData){
	var $dataObj = $("#db_option li[data-value='"+valueData+"']")
	if($dataObj != undefined && $dataObj.length != 0){
		$dataObj.show();
	}
}

//选中后，向右的箭头
function moveToLeft(){
	var $active_li = $("#db_option").find(".active");
	if($active_li == undefined || $active_li.length == 0){
		return ;
	}
	var showData = $active_li.text();
	var valueData = $active_li.attr("data-value");
	//右侧生成参数
	drawParam(showData,valueData);
	//清除可用参数的选中效果
	cancelActive()
	//隐藏当前参数
	$active_li.hide();
	//更新显示Tilte模式
	setTitleModel();
	
}

//生成选中的参数
function drawParam(showData,valueData){
	var html = new Array();
	html.push('');
	html.push('<li class="list-group-item">');
	html.push('<div class="sign-display">');
	html.push('<span class="sign glyphicon glyphicon-trash" title="删除" onclick="deleteE(this);"></span>');
	html.push('<span class="sign glyphicon glyphicon-arrow-up" title="上移" onclick="move(this,-1)"></span>');
	html.push('<span class="sign glyphicon glyphicon-arrow-down" title="下移" onclick="move(this,1)"></span>');
	html.push('</div>');
	html.push('<span data-value="'+valueData+'" data-custom="1">'+showData+'</span>');
	html.push('</li>');
	$("#title-option").append(html.join(" "));
}

//获取参数
function getParams(){
	var params = new Array();
	$("#title-option li").each(function(index){
		var $this_span = $(this).children("span");
		var obj = {};
		var showData = $this_span.text();
		var valueData = $this_span.attr("data-value");
		var custom = $this_span.attr("data-custom");
		var sort = index+1;
		
		obj.tdkName = valueData;
		obj.tdkDesc = showData;
		obj.tdkIsCustom = custom;
		obj.tdkSort = sort;
		
		params.push(obj);
	});
	return params;
}

//更新Title显示模式
function setTitleModel(){
	var params = getParams();
	var separate = $("input[name='separate']").val();
	if(separate == null || separate == ''){
		//layer.alert("请输入分隔符");
		return ;
	}
	var showModel = new Array();
	$.each(params,function(index){
		var custom = this.tdkIsCustom;
		var desc = this.tdkDesc;
		if(custom == 1 ){
			desc = "{"+desc+"}"
		}
		showModel.push(desc);
	});
	
	var showString = showModel.join(separate);
	$("#showModel").val(showString);
}

//选择站点后，加载可配置TDK的URL 
function selectSite(obj){
	
	var thisV = $(obj).val();
	if(thisV == null || thisV == '' || thisV == undefined ){
		//清空URL列表
		$("#urlSelect").empty();
		$("#urlSelect").selectpicker('refresh');
		return ;
	}
	//清空参数
	clearParams();
	
	var siteUrl = '${siteUrl}';
	var url = rootpath+'/tdk/loadUrls.shtml';
	if(siteUrl != null && siteUrl != ''){
		url=rootpath+'/tdk/loadUrlsAll.shtml';
	}
	
	$.ajax({
		url:url,
		data:{pCode:thisV},
		dataType:'json',
		type:'post',
		async:false,
		success:function(data){
			
			if(siteUrl != null && siteUrl != ''){
				$("#urlSelect").prop("disabled",true);
			}
			//清空URL列表
			$("#urlSelect").empty();
			var html = new Array();
			html.push('<option value="">--请选择--</option>');
			for(var i = 0,j = data.length;i<j;i++){
				if(data[i].description == siteUrl){
					html.push('<option value="'+data[i].code+'" selected = "true" >'+data[i].description+'</option>');
				}else{
					html.push('<option value="'+data[i].code+'">'+data[i].description+'</option>');
				}
			}
			$("#urlSelect").append(html.join(" "));
			$("#urlSelect").selectpicker('refresh');
		}
	});
}

//选择URL后，加载可配置属性 
function selectUrl(obj){
	var thisV = $(obj).val();
	if(thisV == null || thisV == '' || thisV == undefined ){
		return ;
	}
	//清空参数
	clearParams();
	
	$.ajax({
		url:rootpath+'/tdk/loadUrlsAll.shtml',
		data:{pCode:thisV},
		dataType:'json',
		type:'post',
		async:false,
		success:function(data){
			$("#db_option").empty();
			var html = new Array();
			for(var i = 0,j = data.length;i<j;i++){
				html.push('<li class="list-group-item" data-value="'+data[i].description+'">'+data[i].value+'</li>');
			}
			$("#db_option").append(html.join(" "));
			
			//绑定事件
			bindEvent();
		}
	});
}

//清空title参数以及可选参数
function clearParams(){
	var titleList = '${titleList}';
	if(titleList == ''){
		$("#title-option").empty();
	}
	$("#db_option").empty();
}

//保存
function save(){
	//验证
	if(!check()){
		return ;
	}
	
	//站点
	var site = $("#siteSelect").val();
	//url
	var siteUrl = $("#urlSelect").val();
	siteUrl = $("#urlSelect option[value='"+siteUrl+"']").text();
	
	//分隔符
	var separate = $("input[name='separate']").val();
	//关键字
	var keywords = $("textarea[name='keywords']").val();
	//描述
	var description = $("textarea[name='description']").val();
	//标题
	var title = getParams();
	
	$.ajax({
		url:rootpath+'/tdk/saveOrUpdate.shtml',
		data:{
			site:site,
			siteUrl:siteUrl,
			separate:separate,
			keywords:keywords,
			description:description,
			title:validateData(title)
		},
		dataType:'json',
		type:'post',
		success:function(data){
			layer.msg('修改成功',{time:1500},function(){
				window.location.href=rootpath+"/tdk/list.shtml";
			});
		}
	});
	
}

//验证
function check(){
	
	//验证站点
	var site = $("#siteSelect").val();
	if(site == null || site == ""){
		layer.msg("请选择站点",{time:3000});
		return false;
	}
	
	//验证url
	var siteUrl = $("#urlSelect").val();
	if(siteUrl == null || siteUrl == ""){
		layer.msg("请选择URL",{time:3000});
		return false;
	}
	
	//验证分隔符
	var separate = $("input[name='separate']").val();
	if(separate == null || separate == ""){
		layer.msg("请输入分隔符",{time:3000});
		return false;
	}
	
	return true;
}

//对象转json
function validateData(obj){
	if(obj == null || obj == ""){
		return "";
	}else{
		return JSON.stringify(obj)
	}
}

//隐藏可选参数
function hiddenOption(){
	$("#title-option li").each(function(){
		var dataValue = $(this).children("span").attr("data-value");
		$("#db_option li[data-value='"+dataValue+"']").hide();
	});
}